<template>
  <van-field
    v-if="h5"
    v-show="designer || (item.options && !item.options.hidden)"
    v-model="fieldModel"
    type="text"
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :readonly="isDetail || designer || (item.options && item.options.readonly)"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :clearable="item.options && item.options.clearable"
    :maxlength="(item.options && item.options.maxlength) || undefined"
    :show-word-limit="item.options && !isDetail && item.options.showWordLimit"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    autocomplete="off"
  >
    <template v-if="append" #button>
      {{ append }}
    </template>
  </van-field>
  <widget-form-item
    v-else
    v-show="designer || (item.options && !item.options.hidden)"
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-input
      v-if="!isDetail"
      v-model="fieldModel"
      type="text"
      :disabled="item.options && item.options.disabled"
      :readonly="designer || (item.options && item.options.readonly)"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
      :maxlength="item.options && item.options.maxlength"
      :show-word-limit="item.options && item.options.showWordLimit"
    >
      <template v-if="append" #append>{{ append }}</template>
    </el-input>
    <div v-else>
      {{ fieldModel }}
      <span v-if="append" style="padding-left: 8px">{{ append }}</span>
    </div>
  </widget-form-item>
</template>

<script>
import _ from 'lodash'
import { ref, computed, watch } from 'vue'
import props from './props'
import field from './field'
import { ExcelFormulaParserService, ExcelFields } from './excelFormulaParser'

export default {
  name: 'MInput',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const append = computed(() => {
      if (props.item.options.append) {
        return props.item.options.append
      }
      return ''
    })

    const formFields = computed(() => {
      const arr = props.widgetList.filter((x) => ExcelFields.includes(x.type) && x.id !== props.item.id)
      const card = props.widgetList.find((x) => x.type === 'card')
      if (card && Array.isArray(card.components)) {
        const components = card.components.filter((x) => ExcelFields.includes(x.type) && x.id !== props.item.id)
        arr.push(...components)
      }
      return arr
    })

    // 创建服务实例
    const card = props.widgetList.find((x) => x.type === 'card')
    const CONFIG = {
      publicVars: card?.options.publicVars || {},
      formula: props.item.options.defaultValueFunc
    }
    // console.log('CONFIG :>> ', CONFIG)
    const refundService = new ExcelFormulaParserService(CONFIG)

    watch(
      () => _.cloneDeep(props.formData),
      (newValue, oldValue) => {
        if (props.item.options.defaultValueFunc && props.item.options.defaultValueType === 1) {
          const cleanedObj1 = _.omit(newValue, props.item.options.name)
          const cleanedObj2 = _.omit(oldValue, props.item.options.name)
          const isEqual = _.isEqual(cleanedObj1, cleanedObj2)
          if (!isEqual) {
            const result = refundService.parse(formFields.value, newValue)
            // console.log('result :>> ', result)
            emit('update:modelValue', String(result))
          }
        }
      },
      { deep: true }
    )

    return {
      append,
      ...field(props, emit)
    }
  }
}
</script>
